<template>
  <div class="absolute-container">
    <component
      :is="currentTheme"
      ref="theme"
      @openDrawer="openDrawer"
    />
    <SettingDrawer
      ref="drawer"
      v-model="currentTheme"
      @update="updateList"
      @restore="restoreList"
      @saveSuccess="refreshList"
      @changeTheme="changeTheme"
    />
  </div>
</template>

<script>
import SettingDrawer from './components/setting.vue'
import Sphere from './components/sphere.vue'
import Card from './components/card.vue'
import { dictionarySchema } from '@/configs'
import { mapActions } from 'vuex'
export default {
  name: 'HomeView',
  components: {
    SettingDrawer,
    Sphere,
    Card
  },
  data () {
    return {
      currentTheme: 'Card'
    }
  },
  created () {
    if (this.$route.query.isLogout && this.$route.query.isLogout === '1') {
      this.logout()
      return
    }
    this.currentTheme = window.localStorage.getItem(`${dictionarySchema}_theme`) || this.$options.data().currentTheme
  },
  methods: {
    ...mapActions('user', ['logout']),
    openDrawer () {
      this.$refs.drawer.open()
    },
    updateList (list) {
      this.$refs.theme.updateList(list)
    },
    restoreList () {
      this.$refs.theme.restoreList()
    },
    refreshList () {
      this.$refs.theme.fetchList()
    },
    changeTheme (value) {
      this.currentTheme = value
    }
  }
}
</script>
